Андреева Мария Викторовна
Текущая папка: portfolio / Занятие 24. SVG
0010_svg_
SVG-фигуры и трансформации
Писать SVG руками довольно просто. Используем фигуры: rect, polygon, circle, ellipse, а также line, polyline и path. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.
Размеры и координаты задаются для разных фигур по-разному,
а вот фон и обводка — одинаковы для всех:
fill — заливка. Можно задать цвет любым способом.
Прозрачность — none или transparent. Цвет по умолчанию — черный;
stroke — цвет обводки;
stroke-width — толщина обводки, по умолчанию — 1. Без stroke не работает.
2 квадрата
/> <0025_svg_transform
Обводка, заливка и трансформации
Можно задавать обводку, заливку и трансформации:
<
0030_svg_a
0011_svg_transform
Transform
SVG-фигуры можно видоизменять с помощью свойства transform.
Возможные значения: translate, scale, rotate, skewX, skewY, matrix.
Circle
translate(70)
translate(70 70)
scale(0.8 0.4)
Если координаты центра поворота не заданы, они равны 0 0 — это левый верхний угол SVG-изображения. rotate(45). Можно задать координаты центра поворота: rotate(45 100 100).
rotate(10) scale(0.8 0.4)
skewX(skew-angle)
skewX(10) scale(0.8)
matrix(a b c d e f)
matrix(.3 0 0 .95 55 25)
<
0022_svg_defs
Группировка
Тег defs служит библиотекой элементов и эффектов, которые будут использоваться позже. Содержимое тега не отображается на странице.
<
0024_svg_use
Тег use
Тег, позволяющий переиспользовать SVG-элементы. Можно копировать любые элементы внутри одной HTML-страницы. Также можно подключить библиотеку элементов в начале страницы, а затем использовать их в нужных местах.
Положение копии определяется относительно верхнего левого угла фигуры в существующей системе координат. При этом внутри символа своя система координат.
При вставке символа ширина и высота (width и height) определяют не размеры фигуры, а видимую область копии (как у правой фигуры), однако при копировании группы (g) ширина и высота ни на что не влияют. Для изменения размеров копии используйте трансформации. <
0021_svg_group
Группировка
Группе, как и фигурам, можно задавать заливку и рамки.
Стиль будет работать для фигур внутри группы, у которых нет своего стиля:
<
0020_svg_group
Группировка
SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и symbol. Элементы, группы элементов и символы можно использовать повторно.
g
Тег g служит для группировки фигур по смыслу, чтобы поддерживать прозрачную структуру документа. Группа элементов может быть использована повторно.<
0023_svg_symbol
Тег defs
Тег defs служит библиотекой элементов и эффектов, которые будут использоваться позже.
Содержимое тега не отображается на странице.
<